<template>
    <div id="autumn"  v-loading="loading">        
        <img :src="banner" alt="" class="banner">
        <div class="unix">
            <div class="unix-box">
                <span class="num">{{day}}</span><span class="unix-txt">天</span>
                <span class="num">{{hour}}</span><span class="unix-txt">时</span>
                <span class="num">{{min}}</span><span class="unix-txt">分</span>
                <span class="num">{{sec}}</span><span class="unix-txt">秒</span>
            </div>
        </div>
        
        <div class="products-row">
            <div class="products" v-for="(item,i) in autumn_products" :key="i"  @click="aloading">
                <router-link :to="{name:'Vproduct',query:{id:item.sku,title:item.title,img:item.image,price:item.price,originPrice:item.originPrice,totalReviews:item.totalReviews}}"></router-link>
                <img :src="item.image" alt="">
                <div class="" >
                    <h2 class="">{{item.title}}</h2>
                    <p class="price"><span>{{item.originPrice}}</span><span>{{item.price}}</span></p>
                </div>
            </div>
        </div> 
    </div>
</template>
<script>
import {getAutumnSale} from './../../ajax/api.js'
export default {
    name:'',    
    components: {
    },
    data(){
        return {
            autumn_products:[{
                "image":"",
                "price":"",
                "originPrice":"",
                "title":""
            }],
            banner:'',
            unix:'1606618868000',
            loading:true,
            adata:'',
            remaining:0,
            content:'',
            day:"",
            hour:"",
            min:"",
            sec:""            
        }
    },
    created:function(){
        this.loadData()
    },
    mounted () {
        this.countdowm(this.endTime)
    },
    methods: {
        async loadData(){
            await getAutumnSale()
            .then(({code,message,data})=>{
                console.log(data);
                this.loading = false;
                this.autumn_products = data.meetings[0].products;
                this.banner = data.meetings[0].banner;   
            })
            .catch(error =>{
                if(error){
                    console.log("错误：",{error});
                }
            })
        },
         aloading(){
            this.loading = true;
            setTimeout(()=>{this.loading = false},2000);
        },
        countdowm(timestamp){
            var endTime = this.unix
            let self = this;
            let timer = setInterval(function(){
            let nowTime = Date.parse(new Date());
            //let endTime = this.unix;
            let timestamp =(endTime - nowTime) / 1000;
           ////console.log(parseInt(timestamp / 86400)+'天'+ parseInt(timestamp / 60 /60%24)+'时'+parseInt(timestamp / 60%60)+'分'+parseInt(timestamp%60)+'秒')
            if(timestamp > 0){
                let day = Math.floor(timestamp / 86400);
                let hour=Math.floor(timestamp / 60 /60%24);
                let min=Math.floor(timestamp / 60%60);
                let sec=Math.floor(timestamp%60);
                hour = hour < 10 ? "0" + hour : hour;
                min = min < 10 ? "0" + min : min;
                sec = sec < 10 ? "0" + sec : sec;
                let format = '';                
                self.day = day;
                self.hour = hour;
                self.min = min;
                self.sec = sec;                
            }else{
                self.day = '00';
                self.hour = '00';
                self.min = '00';
                self.sec = '00'; 
            }
                },1000);
        },
        _callback(){
            if(this.callback && this.callback instanceof Function){
                this.callback(...this);
            }
        }
    }
   
   
}
</script>
<style>
#autumn{background: #fff0e9;}
.banner,.products img{width: 100%;}
.loading{height: 100vh;}
.products-row{margin-top: 20px;text-align: left;padding: 0 5px}
.products a{position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 1;}
.products{width:48%;display:inline-block;margin: 0 1%;background: #fff;margin-top: 2px;border-radius:4px;overflow: hidden;text-align: center;position: relative;}
.products h2{font-size: 12px;height: 26px;overflow: hidden;margin: 0;}
.price span{font-size: 12px;margin: 0 4px;color: #000;}
.unix{position: relative;padding-top:15px;text-align: center; }
.unix-box{display: inline-block;background: #000;padding: 5px 15px;border-radius: 5px}
.unix-box span{color: #fff;font-size: 13px;font-weight: 900;}
</style>
